<template>
    <div id="box">
    <header>
    	<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../assets/img/lunbo.png"/></div>
                <div class="swiper-slide"><img src="../assets/img/lunbo.png"/></div>
                
            </div>
	          <!-- 如果需要分页器 -->
	          <div class="swiper-pagination"></div>       
	          <!-- 如果需要滚动条 -->
              <div class="swiper-scrollbar"></div>
         </div>
     </header>
     <section>
     	<div class="menu">
     		<ul>
     			<li v-for="list in lists"><p><img :src="list.img"></p>{{list.text}}</li>
     		</ul>
     	</div>
     	<div class="nav">
     		<ul>
     			<li v-for="nav in navs">{{nav.text}}</li>
     		</ul>
     	</div>
     	<div class="nav_foot">
     		<span><img :src="imgs"></span>
     		<span>{{aa}}<p>{{news}}<b>{{bb}}</b>{{cc}}</p></span>
     		<button>{{list}}</button>
     	</div>
     	<div class="cai">
     		<ul>
     			<li v-for="lif in lifs"><p><img :src="lif.img"></p>{{lif.text}}</li>
     		</ul>
     	</div>
     	<div class="licai">
     		<span>{{dd}}</span>
     		<span>{{ee}}</span>
     	</div>
     	<div class="re">
     		<ul>
     			<li><p>{{ff}}</p>{{gg}}</li>
     			<li><p v-for="ws in wss">{{ws.text}}</p></li>
     			<li><button>{{ii}}</button></li>
     		</ul>
     	</div>
     	<div class="zhi">
     		<p>{{jj}}</p>
     	</div>
     	<div class="rer">
     		<ul>
     			<li><p>{{ff}}</p>{{gg}}</li>
     			<li><p v-for="ws in wss">{{ws.text}}</p></li>
     			<li><button>{{ii}}</button></li>
     		</ul>
     	</div>
     	<div class="mei">
     		<ul>
     			<li>{{kk}}</li>
     			<li>{{hh}}<img :src="image"></li>
     		</ul>
     	</div>
     	<div class="video">
     		<img :src="images">
     	</div>
     	<div class="mei">
     		<ul>
     			<li>{{kk}}</li>
     			<li>{{hh}}<img :src="image"></li>
     		</ul>
     	</div>
     	<div class="huan">
     		<ul>
     			<li><img :src="imgss"></li>
     			<li><p>{{ll}}</p>{{mm}}</li>
     		</ul>
     	</div>
     	<div class="mei">
     		<ul>
     			<li>{{kk}}</li>
     			
     		</ul>
     	</div>
     	<div class="xian">
     		<img :src="imags">
     	</div>
     	<div class="zan">
     		<img :src="imga">
     		<button>{{zz}}</button>
     	</div>
     </section>
     <footer>
     	<ul>
     		<li v-for="foot in foots"><p><img :src="foot.imgg"></p>{{foot.text}}</li>
     	</ul>
     </footer>
    </div>

</template>

<script>
  import".././assets/js/jquery-1.12.4.min.js"
export default {
  name: 'box',
  data () {
    return{
       lists:[
          {img:"../../static/img/1-1shouye_03.png",text:"安全保障"},
          {img:"../../static/img/1-1shouye_05.png",text:"今夕来源"},
          {img:"../../static/img/1-1shouye_07.png",text:"了解我们"},
          {img:"../../static/img/1-1shouye_09.png",text:"邀请好友"}
       ],
        lifs:[
          {img:"../../static/img/1-1shouye_19.png",text:"买黄金"},
          {img:"../../static/img/1-1shouye_21.png",text:"卖黄金"},
          {img:"../../static/img/1-1shouye_22.png",text:"存黄金"},
          {img:"../../static/img/1-1shouye_23.png",text:"提黄金"}
       ],
       navs:[
          {text:"黄金"},
          {text:"白银"}
       ],
       imgs:"../../static/img/1-1shouye_15.png",
       aa:"281.64元/克",
       news:"市场价：",
       bb:"317.00",
       cc:"元/克",
       list:"价格走势",
       dd:"理财精选",
       ee:"多家线下实体金店 投资理财更放心",
       ff:"259元/克",
       gg:"特权金价",
       wss:[
         {text:"新手特权"},
         {text:"期限180天"},
         {text:"本月已有246人购买"}
       ],
       ii:"立即购买",
       jj:"只允许购买一次，限额1克",
       kk:"媒体采访",
       hh:"更多",
       image:"../../static/img/1-1shouye_33.png",
       images:"../../static/img/1-1shouye_37.png",
       imgss:"../../static/img/1-1shouye_40.png",
       ll:"518全民理财省会 黄金树宋金示诚意",
       mm:"环球网 2017-05-17",
       imags:"../../static/img/1-1shouye_44.png",
       imga:"../../static/img/1-1shouye_47.png",
       zz:"查看保单样本",
       foots:[
          {imgg:"../../static/img/1-1menu1.png",text:"首页"},
          {imgg:"../../static/img/1-1menu2.png",text:"产品选购"},
          {imgg:"../../static/img/1-1menu3.png",text:"我的资产"},
          {imgg:"../../static/img/1-1menu4.png",text:"更多"},
       ]

    }
  },
  mounted () {
      window.Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        autoplay : 1000,
        loop:true,
      })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
   @import ".././assets/less/1-1shouye.less";
   @import ".././assets/css/reset.css";
</style>